<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>故障页面</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />	
		<link href="../css/style.css" rel="stylesheet" />
		<style type="text/css">
			$ {
				demo.css
			}
			
			.animation {
				text-align: center;
			}
			.chart div {
				float: left;
			}
			
			.char-tittle {
				background-color: #55BFDC;
				padding: 3px;
				position: absolute;
				top: 165px;
				left: -2.1em;
			}
				
			.table-content {
				padding: 10px 2px;
				background-color: #fff;
			}
			
			.table-content-left {
				margin-top: 1px;
				width: 45%;
				padding: 10px 2px;
				float: left;
				background-color: #fff;
			}
			
			.table-content-right {
				margin-top: 1px;
				width: 55%;
				padding: 10px 2px;
				float: left;
				background-color: #fff;
			}
			
			.inner-table {
				width: 100%;
			}
			
			.inner-table td {
				text-align: center;
				width: 20%;
				height: 30px;
			}
			
			.inner-table th {
				font-size: .8em;
				text-align: center;
			}
			
			.inner-table .action {
				font-size: .7em;
				font-weight: bold;
				text-align: right;
			}
			
			.inner-table .jigou {
				width: 30%;
				font-size: .7em;
				font-weight: bold;
				text-align: center;
			}
			
			.inner-table .state {
				width: 40%;
				font-size: .7em;
				text-align: left;
				padding-left: 1em;
				color: #666666;
			}
			
			.data{
				width: 20%;
				color: #666;
				font-size: .7em;
			}
			
			.light {
				width: 30px;
				height: 15px;
				background-color: #F39800;
				border-radius: 5px;
				margin: 0 auto;
			}
			
			.gray {
				width: 30px;
				height: 15px;
				background-color: #EFEFF4;
				border-radius: 5px;
				margin: 0 auto;
			}
			
			.red {
				background-color: #F10020 !important;
			}
			
			.green {
				background-color: #66F50E !important;
			}
		</style>
		
	</head>

	<body>
		<div class="animation">
			<h5>故障参数</h5>
		</div>
		<div id="mask"><span>正在获取实时数据...</span></div>
		<div class="chart">
			<div class="inner-box">
				<div id="container1" style="height: 220px; width: 50%; margin: 0 auto"></div>
			</div>
			<div class="inner-box">
				<div id="container2" style="height: 220px; width: 50%; margin: 0 auto"></div>
				<span class="describe"></span>
			</div>
		</div>
		<div class="table-content">
			<table class="inner-table" border="0">
				<tr style="background-color: #F9F39F;">
					<th style="text-align: left;padding-left: 1em;">故障类型</th>
					<th>故障提醒</th>
				</tr>
				<tr>
					<td class="state">前轴承温度高停机</td>
					<td>
						<div class="light" ftag="fault" id="Fhighfbearingtempstop"></div>
					</td>
				</tr>
				<tr>
					<td class="state">排气温度高停机</td>
					<td>
						<div class="gray" ftag="fault" id="Fhighexhtempstop"></div>
					</td>
				</tr>
				<tr>
					<td class="state">系统温度高停机</td>
					<td>
						<div class="gray" ftag="fault" id="Fhighsystempstop"></div>
					</td>
				</tr>
				<tr>
					<td class="state">排气压力高停机</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighexhpressstop"></div>
					</td>
				</tr>
				<tr>
					<td class="state">系统压力高停机</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighsyspressstop"></div>
					</td>
				</tr>
				<tr>
					<td class="state">后轴承温度高预警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighbbearingtempwarn"></div>
					</td>
				</tr>
				<tr>
					<td class="state">前轴承温度高预警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighfbearingtempwarn"></div>
					</td>
				</tr>
				<tr>
					<td class="state">排气温度高预警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighexhtempwarn"></div>
					</td>
				</tr>
				<tr>
					<td class="state">系统温度高预警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighsystempwarn"></div>
					</td>
				</tr>
				<tr>
					<td class="state">排气压力高预警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighexhtempwarn"></div>
					</td>
				</tr>
				<tr>
					<td class="state">系统压力高预警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighsystempwarn"></div>
					</td>
				</tr>
				<tr>
					<td class="state">风机过载</td>
					<td class="data">
						<div class="light" ftag="fault" id="Ffanoverload"></div>
					</td>
				</tr>
				<tr>
					<td class="state">后轴承温度传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fbbearingtempsenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">前轴承温度传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Ffbearingtempsenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">排气温度传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fexhtempsenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">系统温度传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fsystempsenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">喷油压力传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Foilpresssenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">排气压力传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fexhpresssenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">系统压力传感器故障</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fsyspresssenfault"></div>
					</td>
				</tr>
				<tr>
					<td class="state">后轴承温度高停机</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhighbbearingtempstop"></div>
					</td>
				</tr>
				<tr>
					<td class="state">油滤压差开关报警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Foilfilterpressalarm"></div>
					</td>
				</tr>
				<tr>
					<td class="state">油分压差开关报警</td>
					<td class="data">
						<div class="light" ftag="fault" id="Foilpressswitchalarm"></div>
					</td>
				</tr>
				<tr>
					<td class="state">相序错误</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fphaseerror"></div>
					</td>
				</tr>
				<tr>
					<td class="state">主机过载</td>
					<td class="data">
						<div class="light" ftag="fault" id="Fhostoverload"></div>
					</td>
				</tr>
				
 			</table>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/gizwits_noti_ws_0.1.1.js"></script>
		<script>
			mui.plusReady(function(){
				
//				plus.nativeUI.showWaiting( "实时数据加载中..." );		  
//				var tic ;
//				mmtt();
//				function mmtt (){
//				  	tic = setTimeout(function(){
//					  	plus.nativeUI.closeWaiting();
//					  	alert("数据连接超时，请确认设备连接情况！")
//					},10000);
//		  		} 
			    var self = plus.webview.currentWebview();
			    var devid = self.devid;
			    
				//console.log(devid);
				var t = devid.split("/"); 
                  	t[1].toLocaleLowerCase();
		        var gizwitsNotiWs;
		        var enterpriseId = '96d09b9d8d8c4086bca6b0682c60e353';
		        var enterpriseSecret = '6e4fa5d6081e4ce4b0fa3d5caf5f5c73';
		        var host = 'noti.gizwits.com';
		        var port = '2016';        
		        gizwitsNotiWs = new GizwitsNotiWS(enterpriseId, enterpriseSecret, host, port);		        
		        gizwitsNotiWs.onConnected = onConnected;
		        gizwitsNotiWs.onSubscribed = onSubscribed;
		        gizwitsNotiWs.onEvent = onEvent;
		        gizwitsNotiWs.onError = onError;      
		       
		        gizwitsNotiWs.connect();    
		
		        function onConnected()
		        {
		            console.log("完成onConnected!可以开始订阅事件。");
		            subscribe();
		            
		        }
		        
		        function subscribe()
		        {
		            var pk = t[0];
		
		            var mac = [t[1]] ;           
		                       
		            var eventType = ['device.status.kv'];            
		
		            var data = [{
		                        "product_key": pk, 
		                        "macs": mac,
		                        "events": eventType
		                        }];            
		             //console.log(data.length());   
		            if(data.length > 0){
		                console.log("开始订阅事件!");
		                //console.log(data);
		                gizwitsNotiWs.subscribe(data);             
		            }
		        }
		      
		        function onSubscribed()
		        {
		            console.log("完成onSubscribed!可以开始接受消息。");
		        }        
		       
		
		        function onError(value)
		        {
		            console.log(value.toString());
		        }
		        
		        function onEvent(msg){
		        	//console.log(msg);
		        	if(!msg){
//		        		plus.nativeUI.showWaiting( "实时数据加载中..." );	
		        	}else{
//		        		plus.nativeUI.closeWaiting();
//		        		clearTimeout(tic);
		        	}
		        	var msg = msg.data;
		        	//console.log(JSON.stringify(msg));				        	
				   
				    for(var key in msg){ 
				       $("#"+key).text(msg[key].toFixed(1));
				        if(msg[key]=="0" && $("#"+key).attr("ftag")=="fault"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("light");
				            $("#"+key).addClass("gray");
				         }
				         if(msg[key]=="1" && $("#"+key).attr("ftag")=="fault"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("gray");
				            $("#"+key).addClass("light");
				         }  
				         
				    }
		        }
		    })
		</script>
		
		

	</body>

</html>